<template>
  <div class="poi-detail" v-if="poi">
    <h2>{{ poi.name }}</h2>
    <p><strong>类型：</strong>{{ poi.type }}</p>
    <p><strong>城市：</strong>{{ poi.city }}</p>
    <p><strong>简介：</strong>{{ poi.description }}</p>
    <div id="detail-map" ref="mapRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import type { POI } from '@/types/poi'

const route = useRoute()
const mapRef = ref<HTMLDivElement | null>(null)
const poi = ref<POI | null>(null)

onMounted(async () => {
  const id = route.params.id
  const res = await fetch(`http://localhost:3000/pois/${id}`)
  poi.value = await res.json()

  const map = new BMapGL.Map(mapRef.value!)
  const point = new BMapGL.Point(poi.value.lng, poi.value.lat)
  map.centerAndZoom(point, 16)
  map.enableScrollWheelZoom(true)
  const marker = new BMapGL.Marker(point)
  map.addOverlay(marker)
})
</script>

<style scoped>
.poi-detail {
  padding: 20px;
}
#detail-map {
  height: 300px;
  margin-top: 20px;
  border: 1px solid #ccc;
}
</style>
